<template>
    <div class="alumni-mine">
        <p class="catalogue">
            <router-link to="/alumni" replace>校友服务</router-link>
            <router-link :to="{path:'/alumni/news',query:{type:'cucoloris'}}" replace> > 校友剪影</router-link>
            <span> > 我的相册</span>
        </p>
        <div class="mine">
            <div class="mine-top clear">
                <router-link :to="{path:'/alumni/built',query:{path: 'mine'}}" class="pointer fr" tag="span">新建相册</router-link>
            </div>
            <div class="photograph clear">
                <ul class="clear" v-if="photograph.data!=0 && photograph!=0">
                    <li @click="enterPhotograph(item.id)" class="fl pointer" v-for="(item,key) in photograph.data" :key="key" tag="li">
                        <div class="poster">
                            <img :src="BASE_URL+item.pic_cover" alt="相册封面" />
                            <img src="../../../assets/images/待审核.png" v-if="item.status==2" alt="" class="status" />
                            <img src="../../../assets/images/reject.png" v-if="item.status==3" alt="" class="status" />
                            <img src="../../../assets/images/删除.png" @click.stop="deletePhoto(item.id)" alt="" class="close" />
                        </div>
                        <p>{{item.name}}</p>
                    </li>
                </ul>
                <el-pagination
                    v-if="photograph.data!=0 && photograph!=0"
                    background
                    :small="true"
                    layout="prev, pager, next"
                    @current-change="handleCurrentChange"
                    :current-page.synce="page"
                    :page-size="6"
                    :total="photograph.data_sum">
                </el-pagination>
                <div class="empty" v-if="photograph.data==0 || photograph==0">暂时还没有校友剪影哦~</div>
            </div>
        </div>

        <!-- 删除相册提示 -->
        <div class="cover" @click.self="hiddenWraning" v-if="deleteWarning">
            <div class="wraning">
                <div class="wraning-top">
                    <span>提示</span>    
                    <img src="../../../assets/images/删除.png" @click="hiddenWraning" class="pointer" alt="关闭按钮图标" />
                </div>
                <p class="wraning-content">删除后不可恢复，确定删除吗？</p>
                <div class="wraning-control-bar">
                    <span class="pointer" @click.stop="hiddenWraning">取消</span>
                    <span class="pointer" @click.stop="deleteSure">确定</span>
                </div>
            </div>
        </div>
    </div>
    
</template>

<script>
export default {
	data(){
		return {
            photograph:[],    // 存放获取相册的数组，最多六个相册
            deleteWarning:false,     // 控制进行删除相册操作时弹窗的显隐
            deleteId:'',     // 存放选中要删除的相册id
            page:1,    // 存放当前查看的相册页码，初始值为1
            count: 0   // 存放列表的总长度数量
		}
	},
    created(){
        // 获取轮播图信息
        this.getPhotograph();

    },
	methods:{
        getPhotograph(){
            let success = res => {
                // console.log(res.data)
                this.photograph = res.data;

                this.count = res.data.data_sum;
            }

            this.$ajax({
                url: "/api/alumni/alumniPic",
                method: "get",
                params: {
                    create_id:this.$g.user_id,     // 用户id
                    status:-1,    // 状态，-1：全部；1：正常；2：审核中；3：已拒绝'
                    page_index:this.page,     // 页码
                    page_size:6,     // 产品要求6个相册
                    data_type:1,    // 0：没有分页 ； 1：有分页
                },
                func: { success: success }
            })
        },
        // 获取对应页码相册的请求
        handleCurrentChange(page){
            // 设置当前点击的列表页码
            this.page = page;
            this.getPhotograph()
        },
        // 进入相册详情
        enterPhotograph(id){
            // console.log('details:',id)
            this.$router.push({path:'/alumni/album',query:{id: id, path: '2'}})
        },
        // 显示删除相册
        deletePhoto(id){
            this.deleteWarning = true;
            // 获取选中的相册id
            this.deleteId = id;
            // console.log('delete:',id)
        },
        // 确认删除相册并发送删除请求
        deleteSure(){
            // console.log('确认删除相册id:',this.deleteId)
            let success = res => {
                // console.log(res.data)
                // 隐藏弹窗
                this.deleteWarning = false;

                // 重置要删除的相册id
                this.deleteId = '';
                this.photograph = res.data;

                // if(parseInt(this.count/6) + 1 == this.page && this.count%6 == 1){
                //     this.page = this.page - 1;
                // }

                // 重新获取相册列表
                this.getPhotograph()
                
            }

            this.$ajax({
                url: "/api/alumni/alumniPic",
                method: "delete",
                params: {
                   id:this.deleteId    // 
                },
                func: { success: success }
            })
        },
        hiddenWraning(){
            this.deleteWarning = false;
            // 重置要删除的相册id
            this.deleteId = '';
        }
	}
}
</script>


<style lang="scss">
    #alumni{
        .alumni-mine{
            margin:0 auto 62px;
            width:1202px;
            // 目录
            .catalogue{
                height:19px;
                line-height:19px;
                font-size: 14px;
                color: #000000;
                letter-spacing: 0;
                span,a{
                    &:last-child{
                        color: #3F3F3F;
                    }
                }
            }
            .mine{
                margin-top:20px;
                width:100%;
                background: #fff;
                .mine-top{
                    width:100%;
                    height:170px;
                    background: url("../../../assets/images/image06.png") center center no-repeat;
                    span{
                        margin:67px 40px 0 0;
                        width:96px;
                        height:36px;
                        font-size: 14px;
                        text-align:center;
                        line-height:36px;
                        color: #FFFFFF;
                        letter-spacing: 0;
                        background: #348EFC;
                        border-radius: 3px;
                    }
                }
                .photograph{
                    position:relative;
                    width:100%;
                    &>ul{
                        margin-bottom:98px;
                        margin-left:41px;
                        min-height:648px;
                        li{
                            margin:18px 20px 10px 0;
                            width:360px;
                            height:281px;
                            &:hover .poster>.close{
                                opacity:1;
                                transition:opacity 0.3s;
                            }
                            .poster{
                                position:relative;
                                width:360px;
                                height:240px;
                                &>img{
                                    width:100%;
                                    height:100%;
                                    object-fit:cover;
                                    &.status{
                                        position:absolute;
                                        top:0;
                                        left:0;
                                        width:80px;
                                        height:36px;
                                    }
                                    &.close{
                                        position:absolute;
                                        top:8px;
                                        right:8px;
                                        padding: 5px;
                                        width:16px;
                                        height:16px;
                                        background: rgba(0,0,0,0.5);
                                        opacity:0;
                                    }
                                }
                            }
                            p{
                                margin-top:10px;
                                width:100%;
                                height:19px;
                                line-height:19px;
                                text-overflow:ellipsis;
                                overflow:hidden;
                                white-space:nowrap;

                            }
                        }
                    }
                    .el-pagination {
                        position:absolute;
                        bottom:30px;
                        left:21px;
                        button{
                            width:30px;
                            height:30px;
                        }
                        .el-pager{
                            .number,.el-icon.more.el-icon-more{
                                min-width:30px;
                                height:30px;
                                line-height:30px;
                                font-size: 14px;
                                color: #606266;
                                letter-spacing: 0;
                                border-radius: 2px;
                                // background: #F0F2F5;
                                &.active{
                                    color: #FFFFFF;
                                    background: #1989FA;
                                }                                  
                            }
                            .el-icon-d-arrow-left,.el-icon-d-arrow-right{
                                height:30px;
                                line-height:30px;
                            }
                        }

                    }
                    .empty{
                        box-sizing:border-box;
                        padding-top:315px;
                        height:422px;
                        color:#ccc;
                        text-align:center;
                        background: url("../../../assets/images/image05.png") center 77px no-repeat;
                    }
                }
            }
            .cover{
                position:fixed;
                top:0;
                left:0;
                width:100%;
                height:100%;
                background: rgba(0,0,0,0.5);
                .wraning{
                    position:absolute;
                    top:50%;
                    left:50%;
                    transform:translate(-50%,-50%);
                    width:400px;
                    background: #fff;
                    .wraning-top{
                        height:36px;
                        background: #348EFC;
                        span{
                            padding-left:20px;
                            line-height:36px;
                            font-size: 14px;
                            color: #FFFFFF;
                            letter-spacing: 0;
                        }
                        img{
                            position:absolute;
                            top:10px;
                            right:17px;
                        }
                    }
                    .wraning-content{
                        margin-top:75px;
                        height:19px;
                        line-height:19px;
                        font-size: 14px;
                        color: #000000;
                        letter-spacing: 0;
                        text-align: center;
                    }
                    .wraning-control-bar{
                        margin-top:61px;
                        margin-bottom:19px;
                        height:30px;
                        span{
                            display:inline-block;
                            width:68px;
                            height:30px;
                            line-height:30px;
                            border-radius: 3px;
                            font-size: 14px;
                            letter-spacing: 0;
                            text-align:center;
                            &:first-child{
                                margin-left:127px;
                                background: #DEEFFF;
                                color: #7C9BB8;
                            }
                            &:last-child{
                                margin-left:10px;
                                background: #348EFC;
                                color: #FFFFFF;
                            }
                        }
                    }
                }
            }
        }
    }
</style>